<style rel="stylesheet/scss" lang="scss" scoped>
.header_bar{
    display: flex;
    justify-content: space-between;

    .el-form-item{
        margin-bottom: 0;
    }
}
</style>

<template>
    <div>
        <div class="container">
            <el-card shadow="hover" style="padding:0;">
                <el-alert
                title="代码生成器"
                type="success"
                description="可在线生成entity、xml、dao、service、vue、html、js、sql代码，减少70%以上的开发任务，让你更专注业务开发。"
                show-icon
                :closable="false" style="margin-bottom: 10px">
        </el-alert>
                <!-- 操作按钮 -->
                <el-card shadow="never" style="margin-bottom: 10px;">
                    <el-form ref="searchForm" :inline="true" :model="searchForm" size="medium" label-width="120px">
                        <div class="header_bar">
                            <div class="saerch">
                                <el-form-item prop="database">
                                    <el-select v-model="searchForm.database" @change="changeDatabase" placeholder="数据库" >
                                        <el-option
                                                v-for="item in databases"
                                                :key="item.SCHEMA_NAME"
                                                :label="item.SCHEMA_NAME"
                                                :value="item.SCHEMA_NAME"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item prop="tableName">
                                    <el-input v-model="searchForm.tableName" clearable placeholder="表名称"></el-input>
                                </el-form-item>
                                <el-button type="primary" @click="handleSearch()" size="medium">搜索 / 刷新</el-button>
                            </div>

                            <div class="generator">
                                <el-form-item prop="packageName">
                                    <el-input v-model="form.packageName" clearable placeholder="自定义包名：com.quan"></el-input>
                                </el-form-item>
                                <el-form-item prop="moduleName">
                                    <el-input v-model="form.moduleName" clearable placeholder="自定义模块名：system"></el-input>
                                </el-form-item>
                                <el-button type="primary" icon="el-icon-finished" @click="handleGeneratorCode" size="medium">生成代码</el-button>
                            </div>
                        </div>
                    </el-form>
                </el-card>


                <!-- 表格 -->
                <el-table
                    ref="table" size="small" empty-text="暂无数据"
                    element-loading-text="给我一点时间"
                    fit stripe border highlight-current-row
                    v-loading="dataListLoading"
                    :data="tables"
                    :header-cell-style="{'padding-top': '10px', 'height': '50px', 'color': '#515A6E', 'background-color': '#f8f8f9'}"
                    @selection-change="handleSelection">
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <el-table-column type="index" width="55" align="center"></el-table-column>

                    <el-table-column prop="tableName" label="表名"></el-table-column>
                    <el-table-column prop="ENGINE" label="数据库引擎"></el-table-column>
                    <el-table-column prop="tableComment" label="表备注"></el-table-column>
                    <el-table-column prop="createTime" label="时间"></el-table-column>
                </el-table>

                <!-- 分页工具栏 -->
                <div class="pagination">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="searchForm.page"
                            :page-sizes="[10, 20, 30, 50, 100, 200]"
                            :page-size="searchForm.limit"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>

            </el-card>
        </div>
    </div>
</template>

<script>
import { database, tables, code } from "@/api/admin/generator"

export default {
    data() {
        return {
            visible: false,
            condition: false,
            submitLoading: false,

            databases: [],

            tables: [],
            total: 0,
            dataListLoading: true,

            searchForm: {
                page: 1,
                limit: 10,
                // 默认数据库
                database: null,
                tableName: null,
                sortColumns: 'create_time'
            },
            form: {
                database: null,
                packageName: null,
                moduleName: null,
                tables: null
            }
        }
    },
    mounted() {
    	this.$nextTick(function () {
	        this.getDataBase()
    	})
    },
    methods: {
        handleSelection(selection) { // 多选
            this.selectionRows = selection
        },
        handleSizeChange(val) { // 每页数量
            this.searchForm.limit = val
            this.getTables()
        },
        handleCurrentChange(val) { // 页码
            this.searchForm.page = val
            this.getTables()
        },
        handleResetSearch(name) { // 重置搜索表单
            this.handleReset(name)
            this.getTables()
        },
        handleReset(name) { // 重置表单
            const refs = this.$refs
            refs[name].resetFields()
        },
        handleSearch() { // 单条件搜索
            this.getTables()
        },


		/**
         * 详细信息
         */
        getInfo(id) {
            if (id !== undefined) {
                return info(id).then(res => {
                    if (this.ResultMessage(res, false)) {
                        return res
                    } else {
                        this.$notify({ title: '错误', message: error, type: 'error' });
                    }
                }).catch(error => {
                    this.$notify({ title: '错误', message: error, type: 'error' });
                })
            }
        },

        changeDatabase(value) {
            this.searchForm.database = value
            this.form.database = value
            this.searchForm.page = 1
            this.getTables()
        },

        /**
         * 数据列表
         */
        getDataBase() {
            database(this.searchForm).then(res => {
                if (this.ResultMessage(res, false)) {
                    this.databases = res.data
                    this.searchForm.database = this.databases[0].SCHEMA_NAME
                    this.form.database = this.databases[0].SCHEMA_NAME
                    this.dataListLoading = true
                    this.getTables()
                } else {
                    this.dataListLoading = false
                }
            }).catch(error => {
                this.dataListLoading = false
                this.$notify({ title: '错误', message: error, type: 'error' });
            })
        },

        /**
         * 数据库表
         */
        getTables() {
            tables(this.searchForm).then(res => {
                if (this.ResultMessage(res, false)) {
                    this.tables = res.data.records
                    this.total = res.data.total
                    this.dataListLoading = false
                } else {
                    this.dataListLoading = false
                }
            }).catch(error => {
                this.dataListLoading = false
                this.$notify({ title: '错误', message: error, type: 'error' });
            })
        },

        // 生成代码
        handleGeneratorCode() {
            const _this = this
            let tables = []
            if(this.selectionRows) {
                this.selectionRows.filter((item, index) => {
                    tables.push(item.tableName)
                })
            }
            if(tables.length > 0) {
                this.submitLoading = true
                this.form = Object.assign(this.form, {tables})

                let params = '?database='+this.form.database+'&packageName='+(this.form.packageName?this.form.packageName:'')+'&moduleName='+(this.form.moduleName?this.form.moduleName:'')+'&tables='+this.form.tables.join(',')
                let downloadUrl = process.env.VUE_APP_BASE_SERVICE_URL+'/api/admin/generator/code' + params

                location.href = downloadUrl;
            } else {
                this.$notify({ title: '提示', message: '请选择要生成的表', type: 'info' });
            }
        }

    }
}
</script>
